<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="订单号" prop="outTradeNo">
        <el-input
          v-model="queryParams.outTradeNo"
          placeholder="请输入订单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
<!--      <el-form-item label="付款ip" prop="spbillCreateIp">-->
<!--        <el-input-->
<!--          v-model="queryParams.spbillCreateIp"-->
<!--          placeholder="请输入付款ip"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="交易号" prop="transactionId">
        <el-input
          v-model="queryParams.transactionId"
          placeholder="请输入交易号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
          <el-option
            v-for="dict in dict.type.fo_dify_flow_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="dify_flowList" @selection-change="handleSelectionChange">
<!--      <el-table-column type="selection" width="55" align="center" />-->
<!--      <el-table-column label="ID" align="center" prop="id" />-->
<!--      <el-table-column label="产品id" align="center" prop="productId" />-->
      <el-table-column label="用户" align="center" prop="xcxUserName" >
        <template slot-scope="scope">
          <div class="user-info" style="display: flex; align-items: center; gap: 8px;">
            <img :src="scope.row.xcxUserAvatar" class="avatar" width="50" height="50" />
            <span>{{scope.row.xcxUserName}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="房源标题" align="center" prop="houseTitle" :show-overflow-tooltip='true' width="400px">
        <template slot-scope="scope">
          <a :href="scope.row.houseHref" target="_blank" style="color: #409EFF">{{scope.row.houseTitle}}</a>
        </template>
      </el-table-column>
      <el-table-column label="时间" align="center" prop="createTime" />
      <el-table-column label="问题" align="center" prop="userQuestion" :show-overflow-tooltip='true' />
      <el-table-column label="AI输出" align="center" prop="aiOutput" :show-overflow-tooltip='true' />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="showChat(scope.row)"
          >查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog :title="'对话详情'" :visible.sync="showChatDialog" width="500px" append-to-body>
      <div class="chat-container" >
        <!-- 聊天消息区域 -->
        <div class="chat-messages" ref="messagesContainer" >

          <div v-for="item in messageInfo"  :key="item.id">
            <!-- 我方消息 -->
            <div class="message-item message-right">
              <div class="message-content">
                <div class="message-bubble bubble-right">
                  <div class="message-text">${{item.userQuestion}}</div>
                </div>
              </div>
              <div class="avatar">
                <img :src="item.xcxUserAvatar" alt="头像">
              </div>
            </div>

            <!-- 对方消息 -->
            <div class="message-item message-left">
              <div class="avatar">
                <img src="@/assets/logo/logo.png" alt="头像">
              </div>
              <div class="message-content">
                <div class="message-bubble bubble-left">
                  <div class="message-text">${{item.aiOutput}}</div>
                </div>
              </div>
            </div>


          </div>


<!--          <div>-->
<!--            &lt;!&ndash; 对方消息 &ndash;&gt;-->
<!--            <div class="message-item message-left">-->
<!--              <div class="avatar">-->
<!--                <img src="https://api.yipaiju.com/api/public/v1/profile/upload/2023/05/24/tmp_0f1b326bb9465e957b26185f4722b31005940096f6da22d9_20230524141435A002.jpg" alt="头像">-->
<!--              </div>-->
<!--              <div class="message-content">-->
<!--                <div class="message-bubble bubble-left">-->
<!--                  <div class="message-text">听起来不错，能分享一下是什么项目吗？</div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->

<!--            &lt;!&ndash; 我方消息 &ndash;&gt;-->
<!--            <div class="message-item message-right">-->
<!--              <div class="message-content">-->
<!--                <div class="message-bubble bubble-right">-->
<!--                  <div class="message-text">是一个基于Vue和Element UI的后台管理系统，正在开发中</div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="avatar">-->
<!--                <img src="https://api.yipaiju.com/api/public/v1/profile/upload/2023/05/24/tmp_0f1b326bb9465e957b26185f4722b31005940096f6da22d9_20230524141435A002.jpg" alt="头像">-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->


        </div>
      </div>
    </el-dialog>

    <!-- 添加或修改尽调报告订单对话框 -->
<!--    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>-->
<!--      <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
<!--&lt;!&ndash;        <el-form-item label="产品id" prop="productId">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-input v-model="form.productId" placeholder="请输入产品id" />&ndash;&gt;-->
<!--&lt;!&ndash;        </el-form-item>&ndash;&gt;-->
<!--        <el-form-item label="openid" prop="openid">-->
<!--          <el-input v-model="form.openid" placeholder="请输入openid" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="支付Body" prop="payBody">-->
<!--          <el-input v-model="form.payBody" placeholder="请输入支付Body" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="金额" prop="totalFee">-->
<!--          <el-input v-model="form.totalFee" placeholder="请输入金额" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="订单号" prop="outTradeNo">-->
<!--          <el-input v-model="form.outTradeNo" placeholder="请输入订单号" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="付款ip" prop="spbillCreateIp">-->
<!--          <el-input v-model="form.spbillCreateIp" placeholder="请输入付款ip" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="交易号" prop="transactionId">-->
<!--          <el-input v-model="form.transactionId" placeholder="请输入交易号" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="状态" prop="status">-->
<!--          <el-select v-model="form.status" placeholder="请选择状态">-->
<!--            <el-option-->
<!--              v-for="dict in dict.type.fo_dify_flow_status"-->
<!--              :key="dict.value"-->
<!--              :label="dict.label"-->
<!--:value="parseInt(dict.value)"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="人工报告" prop="report1Path">-->
<!--&lt;!&ndash;          <el-input v-model="form.report1Path" placeholder="请输入人工报告" />&ndash;&gt;-->
<!--          <file-upload v-model="form.report1Path" :limit="1" file-size="100" :file-type="['pdf']"></file-upload>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="AI报告" prop="report2Path">-->
<!--&lt;!&ndash;          <el-input v-model="form.report2Path" placeholder="请输入AI报告" />&ndash;&gt;-->
<!--          <file-upload v-model="form.report2Path" :limit="1" file-size="100" :file-type="['pdf']"></file-upload>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!--        <el-button @click="cancel">取 消</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
import { listdify_flow, getdify_flow, deldify_flow } from "@/api/yipaiju/dify_flow";

export default {
  name: "dify_flow",
  dicts: ['fo_dify_flow_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 尽调报告订单表格数据
      dify_flowList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      showChatDialog: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        xcxUserId: null,
      },
      messageInfo: [],
      messageTotal: 0,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询尽调报告订单列表 */
    getList() {
      this.loading = true;
      listdify_flow(this.queryParams).then(response => {
        this.dify_flowList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        xcxUserId: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除此数据项？').then(function() {
        return deldify_flow(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    showChat(row) {
      this.messageInfo = [];
      this.showChatDialog = true;
      getdify_flow({xcxUserId: row.xcxUserId, houseId: row.houseId}).then(response => {
        this.messageInfo =  response.rows;
        this.messageTotal = response.total;
      });
    },
  }
};
</script>
<style scoped>
.chat-container {
  height: 600px;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

/* 消息区域 */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background: #f5f5f5;
}

/* 时间分割线 */
.time-divider {
  text-align: center;
  margin: 20px 0;
}

.time-divider span {
  background: #e0e0e0;
  color: #999;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
}

/* 消息项 */
.message-item {
  display: flex;
  margin-bottom: 20px;
  align-items: flex-start;
}

.message-left {
  justify-content: flex-start;
}

.message-right {
  justify-content: flex-end;
}

/* 头像 */
.avatar {
  margin: 0 10px;
}

.avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* 消息内容 */
.message-content {
  max-width: 70%;
}

/* 消息气泡 */
.message-bubble {
  padding: 10px 15px;
  border-radius: 8px;
  position: relative;
  word-wrap: break-word;
}

.bubble-left {
  background: white;
  border-top-left-radius: 0;
}

.bubble-right {
  background: #95ec69;
  border-top-right-radius: 0;
}

/* 消息文本 */
.message-text {
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

/* 消息时间 */
.message-time {
  font-size: 12px;
  color: #999;
  text-align: right;
  margin-top: 5px;
}

/* 输入区域 */
.chat-input-area {
  background: white;
  border-top: 1px solid #e0e0e0;
  padding: 10px;
}

.input-toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.input-toolbar .el-button {
  margin-right: 10px;
  color: #666;
}

.input-main {
  margin-bottom: 10px;
}

.input-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 滚动条样式 */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
